<template>
	<!--顶部导航start-->
	<div class="shortcut">
		<!--版心-->
		<div class="w">
			<!--左浮动区域-->
			<div class="fl">
				<div class="dt"> 送至：北京
					<i><s>◇</s></i>
				</div>
			</div>
			<!--右浮动区域-->
			<div class="fr">
				<ul>
					<li>
						<a href="#">你好，请登录</a> &nbsp;&nbsp;
						<a href="#" class="col-red">免费注册</a>
					</li>
					<li class="line"></li>
					<li>我的订单</li>
					<li class="line"></li>
					<li class="fore">我的京东
						<i><s>◇</s></i>
					</li>
					<li class="line"></li>
					<li>京东会员</li>
					<li class="line"></li>
					<li>企业采购</li>
					<li class="line"></li>
					<li class="fore tel-jd">
						<em class="tel"></em> <!--小手机图标-->
						手机京东
						<i><s>◇</s></i>
					</li>
					<li class="line"></li>
					<li class="fore">
						关注京东
						<i><s>◇</s></i>
					</li>
					<li class="line"></li>
					<li class="fore">
						客户服务
						<i><s>◇</s></i>
					</li>
					<li class="line"></li>
					<li class="fore">
						网站导航
						<i><s>◇</s></i>
					</li>

				</ul>
			</div>


		</div>

	</div>
	<!--顶部导航end-->
</template>

<style scoped>
	@import '../../assets/jd/jdbase.css';

	/*顶部导航start*/
	.shortcut {
		height: 30px;
		line-height: 30px;
		background-color: #f1f1f1;
	}

	.dt,
	.shortcut .fore {
		padding: 0 20px 0 10px;
		position: relative;
	}

	.dt i,
	.fore i {
		font: 400 15px/15px "宋体";
		position: absolute;
		top: 13px;
		right: 3px;
		height: 7px;
		overflow: hidden;
		width: 15px;
	}

	.dt s,
	.fore s {
		position: absolute;
		top: -8px;
		left: 0;
	}

	.shortcut .tel-jd {
		padding: 0 20px 0 25px;
	}

	.fl {
		float: left
	}

	.fr {
		float: right
	}

	.fr .line {
		width: 1px;
		height: 12px;
		background-color: #ddd;
		margin-top: 9px;
		padding: 0;
	}

	.fr li {
		float: left;
		padding: 0 10px;
	}

	.col-red {
		color: #C81623 !important;
	}

	.tel {
		position: absolute;
		width: 15px;
		height: 20px;
		background: url(../../assets/jd/sprite.png) no-repeat;
		left: 5px;
		top: 5px;
	}

	.al {
		text-align: left
	}

	.ac {
		text-align: center
	}

	.ar {
		text-align: right
	}

	.hide {
		display: none
	}


	/*顶部导航end*/
</style>